import React, { useEffect } from 'react';
import { Box } from '@nova-hf/ui';
import ServiceWrapper from 'beta/containers/layout/ServiceWrapper';
import UI from 'beta/store/ui';
import { IContext } from 'beta/typings/context';
import { serviceColorMap } from 'beta/utils/helpers';
import { useRouter } from 'next/router';
import {
  ContractStatus,
  ServiceType,
  useContractItemsQuery,
  useGetServiceTypeQuery,
} from 'typings/graphql';

import FiberServiceContainer from './containers/FiberServiceContainer';
import MobileServiceContainer from './containers/MobileServiceContainer';
import TvServiceContainer from './containers/TvServiceContainer';

type ThjonustaProps = {
  ui?: UI;
};

const Thjonusta = ({ ui }: ThjonustaProps) => {
  const router = useRouter();
  const serviceId = typeof router?.query?.serviceId === 'string' ? router?.query?.serviceId : '';
  const customerId = typeof router?.query?.customerId === 'string' ? router?.query?.customerId : '';

  const { data, loading, error } = useGetServiceTypeQuery({
    variables: {
      serviceId: (router.query.serviceId as string) ?? '',
    },
  });

  const { data: contractData } = useContractItemsQuery({
    variables: {
      input: {
        serviceId,
        customerId,
      },
    },
    skip: !serviceId || !customerId,
  });

  const contract = contractData?.contracts.contracts.find(
    (contract) =>
      contract.status === ContractStatus.Active || contract.status === ContractStatus.Pending,
  );
  const variant = contract?.variant;

  const isAlltSaman = variant?.id.toLowerCase().includes('allt-saman');

  const type = data?.service?.type;
  useEffect(() => {
    if (isAlltSaman !== undefined && ui) {
      if (isAlltSaman) {
        ui.setServiceColor('orange');
      } else {
        ui.setServiceColor(serviceColorMap(data?.service?.type));
      }
    }
  }, [isAlltSaman, ui]);

  if (error) {
    return <Box padding={30}>Something went wrong!</Box>;
  }

  return (
    <ServiceWrapper isLoading={loading}>
      {(type === ServiceType.Mobile || type === ServiceType.MobileInternet) && (
        <MobileServiceContainer />
      )}
      {type === ServiceType.Fiber && <FiberServiceContainer />}
      {type === ServiceType.Tv && <TvServiceContainer />}
    </ServiceWrapper>
  );
};

Thjonusta.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    serviceId: query.serviceId,
    namespacesRequired: ['service', 'fiber'],
  };
};

export default Thjonusta;